<template>
  <div class="payment">
       <!-- 头部 -->
     <div class="payment_top"><van-icon name="arrow-left" size=25px  class="icon"/><span class="payment_item">支付预约完成</span></div>
     <div class="payment_price">
         <div class="price_1"><span >老年人体检套餐豪华版（女）</span><span class="right">￥998</span></div>
         <div class="price_2"><span > 脑部CT</span><span class="right">￥300</span></div>
         <div class="price_3"><span >心电图</span><span class="right">￥99</span></div>
         <div class="price_4"><span style="color:orange" class="total">合计</span><span style="color:orange" class="right">￥1397</span></div>
     </div>
     <div class="payment_select">
<!--          
        <div class="selects_1" ><div class="block"><div class="block1"></div></div>
        <div class="select_1" ><span class="name">体检机构</span><span  class="name">未选择<van-icon name="arrow" color="#1989fa" /></span></div> 
        </div>
        <div class="selects_2"><div class="block"><div class="block1"></div></div>
        <div class="select_1"><span class="name">体检人</span><span class="name">未选择<van-icon name="arrow" color="#1989fa" /></span></div> </div>
        <div class="selects_3"><div class="block"><div class="block1"></div></div>
        <div class="select_1"><span class="name">体检日期</span><span class="name" >未选择<van-icon name="arrow" color="#1989fa" /></span></div> </div> -->
        <!-- 体检机构 -->
        <div class="organization">
            <van-cell is-link title="选择体检机构" @click="show = true" />
            <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
        </div>
        <!-- 体检人 -->
        <div class="person">
            <span class="person1">体检人</span><van-icon name="arrow" class="arrow" />
        </div>
        <!-- 体检时间 -->
        <div class="time">
            <div class="times">
              <van-cell title="选择单个日期" :value="date" @click="show = true" />
                <van-calendar v-model="show" @confirm="onConfirm" />  
                <van-icon name="arrow" class="data" />   
            </div>
            <!-- <van-icon name="arrow" /> -->
        </div>
     </div>
     
     <div class="blank"></div>
     <!-- 底部按钮 -->
     <div class="payment_botton">
         <div class="order"><span>立即订购</span></div>
     </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
     data() {
    return {
        // 体检机构
      show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
    //   体检日期
        date: '',
        shows: false,
    };
  },
  methods: {
    //   体检机构
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    // 体检日期
    methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
  },
}
</script>

<style lang="scss">
.payment{

   // 体检头部
    .payment_top{
        width: 100%;
        height: 50px;
        // background-color: aqua;
        display: flex;
        text-align:center;
        // 体检项文字
            .payment_item{
                display: block;
                padding-top: 10px;
                margin-left: 33%;
                }
        // 头部图标
            .icon{
                display:inline-block;
                 padding-top: 10px;
                }

    } 
    // 价格块
    .payment_price{
    //   价格右边距
        .right{
            margin-right: 20px;    
        }
        
        // 格式
        .price_1{
            margin-top: 15px;
             height: 43px;
            //  line-height: 30px;
             display: flex;
           justify-content:space-between; 
           border-bottom: 1px solid grey;
           margin-left: 5px;
           
        }
        .price_2{
            margin-top: 15px;
            height: 43px;
            // line-height: px;
             display: flex;
             border-bottom: 1px solid grey;
           justify-content:space-between; 
           margin-left: 5px;
        }
        .price_3{
            margin-top: 15px;
            height: 43px;
             display: flex;
             border-bottom: 1px solid grey;
           justify-content:space-between; 
           margin-left: 5px;
           
        }
        .price_4{
            margin-top: 20px;
             display: flex;
             height: 40px;
           justify-content:space-between; 
            border-bottom: 10px solid rgb(224, 220, 220);
        }
        .total{
           margin-left: 5px; 
        }
    }
    // 选择机构
    .payment_select{
        height: 200px;
        // 选择机构
        .organization{
            height: 60px;
            // background-color: bisque;
            .van-cell {
                
                font-size: 16px;
                line-height: 40px;
           
            }
            .van-cell__left-icon, .van-cell__right-icon {
                height: 24px;
                font-size: 16px;
                line-height: 40px;
            }
        }
        // 体检人
        .person{
            height: 70px;
            background-color: white;
            display: flex;
            justify-content:space-between; 
            .person1{
                line-height: 70px;
                margin-left: 15px;
            }
            .arrow{
                line-height: 70px;
                margin-right: 15px;
            }
        }
        // 体检时间
        .time{
            height: 70px;
            border-bottom: 10px solid rgb(224, 220, 220);
            // display: flex;
            .van-cell {
                line-height: 50px;
                font-size: 16px;
            }
            .times{
                display: flex;
            }
            .data{
                line-height: 70px;
                margin-right: 15px;
            }
        }
       
        
    }
    // 空白
    .blank{
        height: 120px;
    }
    // 底部
    .payment_botton{
        width: 100%;
        position: fixed;
        bottom: 0;
        margin-top: 41px;
        height: 60px;
        background-color: #3ecccc;
        .order{
             line-height: 60px; 
             text-align: center; 
             color: rgb(231, 243, 243);
        }
    }
}

</style>